<template>
    <div>
        <div>
            <a-button @click="testClick">按钮</a-button>
        </div>
        <pre
            class="language-html"
        ><code>{{ `<a-button @click="testClick">按钮</a-button>` }}</code></pre>
        <pre class="language-javascript"><code>{{ `export default {
    methods:{
        testClick(){
            alert('我被点击了')
        }
    }
}` }}</code></pre>
        <div v-for="type in typeList" :key="type.name" class="c-m-t-m">
            <p>{{ type.name }}</p>
            <a-table
                :headerList="type.headerList"
                :dataList="type.dataList"
            ></a-table>
        </div>
    </div>
</template>

<script>
import { toast, alert } from 'aos4v'

export default {
    data() {
        return {
            typeList: [
                {
                    name: 'props',
                    headerList: [
                        { name: 'name', text: '名称' },
                        { name: 'remark', text: '说明' },
                        { name: 'type', text: '类型' },
                        { name: 'default', text: '默认值' },
                    ],
                    dataList: [
                        { name: 'color', remark: '主题色', type: 'default | primary | secondary | success | warning | error', default: 'default' },
                        { name: 'disabled', remark: '是否禁用', type: 'boolean', default: 'false' },
                        { name: 'size', remark: '尺寸', type: 'xs | s | m | l | xl', default: 'm' },
                        { name: 'sharp', remark: '是否尖角', type: 'boolean', default: 'false' },
                        { name: 'circle', remark: '是否圆形', type: 'boolean', default: 'false' },
                        { name: 'square', remark: '是否正方形', type: 'boolean', default: 'false' },
                        { name: 'block', remark: '是否块级', type: 'boolean', default: 'false' },
                        { name: 'loading', remark: '是否加载中', type: 'boolean', default: 'false' },
                        { name: 'plain', remark: '是否朴素样式', type: 'boolean', default: 'false' },
                        { name: 'link', remark: '是否链接样式', type: 'boolean', default: 'false' },
                        { name: 'align', remark: '文字对齐方式', type: 'left | center | right', default: 'center' },
                        { name: 'active', remark: '是否激活状态', type: 'boolean', default: 'false' },
                    ],
                }
            ]
        }
    },
    methods: {
        async testClick() {
            //let result = await alert(`<span style="color: red">我被点击了，请选择</span>`, {title:`<span style="color: blue">提示</span>`})
            //toast('你选择了' + result)
            let result = await alert(`<span style="color: red">我被点击了，请选择</span>`, { title: `<span style="color: blue">提示</span>`, caller: this })
            toast('你选择了　' + result)
        }
    }
}
</script>